<template>
  <div class="register-box">

    <el-dialog
        :visible.sync="dialogVisible"
        width="25%"
        center
        destroy-on-close
        @close="closeDialog"
        v-if="dialogVisible"
    >
      <el-form :model="registerModel" :rules="registerModelRules" ref="registerModel" label-width="100px"
               class="register-form" label-position="top">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="registerModel.username" clearable></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="registerModel.password" show-password clearable></el-input>
        </el-form-item>

        <el-form-item label="手机号" prop="tele">
          <el-input v-model="registerModel.tele" clearable></el-input>
        </el-form-item>

        <el-form-item label="头像" prop="avatar">
          <el-upload
              class="avatar-uploader"
              action=""
              :show-file-list="false"
              :http-request="uploadAvatar">
            <img v-if="registerModel.avatar" :src="registerModel.avatar" class="avatar" v-model="registerModel.avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="用户性别" prop="sex">
          <el-switch
              style="display: block"
              v-model="registerModel.sex"
              :active-value="0"
              :inactive-value="1"
              active-color="#13ce66"
              inactive-color="#13ce66"
              active-text="女"
              inactive-text="男">
          </el-switch>
        </el-form-item>

      </el-form>


      <span slot="footer" class="dialog-footer">
    <el-button type="primary" plain @click="register('registerModel')">注册</el-button>
    <el-button plain @click="dialogVisible = false">取消</el-button>
     </span>
    </el-dialog>
  </div>
</template>

<script>
import {upload} from "@/utils/upload";
import {register} from "@/api/register";

export default {
  props: {
    show: {
      type: Boolean,
      default: false,
      require: true
    }
  },
  data() {
    return {
      labelPosition: "left",
      dialogVisible: false,
      registerModel: {
        username: '',
        password: '',
        tele: '',
        avatar: '',
        sex: 0
      },
      registerModelRules: {
        username: [
          {
            required: true, message: '请输入用户名', trigger: 'blur'
          }
        ],
        password: [
          {
            required: true, message: '请输入密码', trigger: 'blur'
          }
        ],
        tele: [
          {
            required: true, message: '请输入手机号', trigger: 'blur'
          }
        ],
        avatar: [
          {
            required: true, message: '请上传头像', trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    closeDialog() {
      this.dialogVisible = false
    },
    //上传用户头像
    uploadAvatar(file) {
      upload(file.file).then(res => {
        if (res !== null) {
          this.registerModel.avatar = res
        }
      }).catch(res => {

      })
    },
    //注册用户
    register(val) {
      this.$refs[val].validate((valid => {
        if (valid) {
          register(this.registerModel).then(res => {
            if (res.code === 200) {
              this.$message.success("注册成功")
            }
            // 关闭dialog
            this.dialogVisible = false
          }).catch(error => {

          })
        }
      }))
    }
  },
  watch: {
    show(newValue) {
      this.dialogVisible = newValue
    },
    dialogVisible(newValue) {
      if (!newValue) {
        this.$refs['registerModel'].resetFields()
        this.$emit('show', this.dialogVisible)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.register-form {
  height: 400px;
  overflow: auto;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}


</style>